<!doctype html>

<html>

<head>
	<meta charset="UTF-8">
	<title>文件上传</title>
	{js href="https://zwgt-cache.oss-cn-hangzhou.aliyuncs.com/static/home/js/jquery.js" /}
	<style>
	h1{
		display: block;
		width: 100%;
		color: white;
		text-align: center;
		margin: auto;
		text-shadow: 5px 5px 5px #29285d;
	}
	input{
		text-align: center;
		color: #909090;
	}
	input::-webkit-input-placeholder {
		/* placeholder颜色  */
		color: #0f9ad6;
		/* placeholder字体大小  */
		font-size: 10px;
		/* placeholder位置  */
		text-align: left;
	}
	.con{
		width: 100%;
		height: 100vh;
		background: url('/static/img/img_bg.png');
		background-size: 100% 100%;
	}
	.form{
		width: calc(28% - 50px);
		height: calc(18vw - 50px);
		min-width: 250px;
		min-height: 200px;
		margin: 2vh auto;
		padding:2%;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: relative;
		top: 25%;
	}
	.btn{
		display: block;
		width: 40%;
		margin: 7vh auto;
		background: white;
		text-align: center;
		color: #0f9ad6;
		font-size: 14px;
		line-height: 28px;
		border-radius: 50px;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.37);
		-moz-user-select: -moz-none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.files{
		width: 50%;
		margin-top: 20%;
	}
	#file_name{
		width: 75%;
		height: 30px;
	}
	a.input {
		width:18%;
		height:30px;
		line-height:30px;
		background:#3091d1;
		text-align:center;
		display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
		overflow:hidden;/*去掉的话，输入框也可以点击*/
		position:relative;/*相对定位，为 #file 的绝对定位准备*/
		top:10px;
	}
	a.input:hover {
		background:#31b0d5;
		color: #ffffff;
	}
	a{
		text-decoration:none;
		color:#FFF;
	}
	#file {
		opacity:0;/*设置此控件透明度为零，即完全透明*/
		filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
		font-size:100px;
		position:absolute;/*绝对定位，相对于 .input */
		top:0;
		right:0;
	}
	.re{
		display: block;
		width: 100px;
		background: white;
		text-align: center;
		color: #0f9ad6;
		font-size: 14px;
		line-height: 28px;
		border-radius: 50px;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.37);
		position: absolute;
		top: 20px;
		left: 20px;
	}
</style>
</head>
<body>
	
	<div class="con">

		<form method="post" enctype="multipart/form-data" class="form" action="{:url('add')}">
			<h1>文件上传</h1>
			<br>
			<br>
			<input type="text" id="file_name" readonly="readonly" value="点击右侧浏览查找文件" />
			<a href="javascript:void(0);" class="input">
				浏览
				<input type="file" class="files " name="files" id="file">
			</a>
			<br>
			
			<input type="submit" class="btn" value=" 提交 " >
		</form>
		<button class="re" onClick="javaScript:history.go(-1)">返回</button>
	</div>
</body>
<script type="text/javascript">
	$(function(){
        $("#file").change(function(){  // 当 id 为 file 的对象发生变化时
        	var fileSize = this.files[0].size;
        	var size = fileSize / 1024 / 1024;
        	if (size > 5) {
        		alert("附件不能大于5M,请将文件压缩后重新上传！");
        		this.value="";
        		return false;
        	}else{
                $("#file_name").val($("#file").val());  //将 #file 的值赋给 #file_name
            }
        })
    });

</script>
</html>
